<template>
  <div class="container">
    <h1>Hello Vue 3</h1>
    <div class="links">
      <RouterLink class="link" to="/" >Home</RouterLink>
      <RouterLink class="link" to="/about">About</RouterLink>
      <RouterLink class="link" to="/news">News</RouterLink>
    </div>
    <div class="buttons"> 
      <button @click="pushAbout">push About</button>
      <button @click="pushNews">push News</button>
      <button @click="replaceAbout">replace About</button>
    </div>
    <div class="view">
        <router-view />
    </div>
  </div>
</template>

<script setup>
import { RouterLink } from 'vue-router';
import { useRoute,useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const pushAbout = () => {
  // router.push({path: '/about',query: {id: 123}});
}

const pushNews = () => {
  // router.push({name: 'About',params: {id: 456}})
}
  
const replaceAbout = () => {
  router.replace('/about');
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 500px;
}

.links {
  display: flex;
  justify-content: center;
  & > .link {
    margin: 0 10px;
    text-decoration: none;
  }
}
.buttons {
  display: flex;
  justify-content: center;
  & > button {
    margin: 10px;
  }
}

.view {
  border: 3px solid hsl(208, 53%, 41%);
  border-radius: 10px;
  width: 100%;
  flex-grow: 1;
}
</style>
